<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      background-image: url("./111.png");
    }
    #box {
      width: 500px;
      height: 300px;
      background-color: #ccc;
      margin: 100px auto;
      padding: 10px;
      box-sizing: border-box;
    }
    #box > p {
      margin-top: 40px;
    }
    #box > p > input[type="button"] {
      width: 200px;
      height: 30px;
      background-color: hotpink;
    }
  </style>
</head>
<body>
  <div id="box">
    <p>
      用户名：
        <input type="text" id="username">
    </p>
    <p>
      密码框：
        <input type="password" id="password">
    </p>
    <p>
      <input type="button" value="登录" id="btn">
    </p>
  </div>

  <script>
    // var username = document.getElementById("username");
    // var password = document.getElementById("password");
    // var btn = document.getElementById("btn");
    // btn.onclick=function () {
    //   if(username.value.trim() !== "admin") {
    //     alert("用户名错误");
    //     return;
    //   }
    //   if(password.value !== "123456") {
    //     alert("密码错误");
    //     return;
    //   }
    //   if(username.value.trim() === "admin" && password.value === "123456") {
    //     alert("登录成功");
    //     location.assign("http://www.baidu.com");
    //   }
    // }

    // 手动输入手机号码，查看是否获奖
    var tel = prompt("请输入手机号码");
    var jiang = "13911255701";
    var phone = tel.substring(0, 3) + "****" + tel.substring(7);
    if(jiang === tel) {
      alert(phone + "  用户，恭喜你，中奖1000W了");
    }else {
      alert(phone + "  用户，很遗憾，没有中奖");
    }
  </script>
</body>
</html>